<script setup>
import {checkPwdStrong} from "@/utils/utils";
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {md5} from "js-md5";
import {modifyPwd} from "@/api/login";

const {proxy} = getCurrentInstance();
const formRef = ref();
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const emit = defineEmits(['success'])
// 密码二重校验
const equalToPassword = (rule, value, callback) => {
  if (formData.value.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = reactive({
  oldPassword: [{required: true, message: '旧密码不能为空', trigger: 'blur'}],
  newPassword: [{required: true, message: '新密码不能为空', trigger: 'blur'}, {
    min: 6,
    message: '密码长度不能小于6位',
    trigger: 'blur'
  }],
  confirmPassword: [{required: true, message: '确认密码不能为空', trigger: 'blur'}, {
    required: true,
    validator: equalToPassword,
    trigger: 'blur'
  }]
})
const msgTextNew = ref()
const pwdPercentageNew = ref(0)
const pwdColorNew = ref("#FF5340")
const pwdFormatFNew = ref('弱')
const msgTextConfirm = ref()
const pwdPercentageConfirm = ref(0)
const pwdColorConfirm = ref("#FF5340")
const pwdFormatFConfirm = ref('弱')

const handleSubmit = async () => {
  await formRef.value.validate();
  let data = {
    oldPassword: md5(formData.value.oldPassword),
    newPassword: md5(formData.value.newPassword)
  }
  await modifyPwd(data);
  proxy.$modal.okNotify('修改成功');
  emit('success');
}

watch(() => formData.value.newPassword, (newVal) => {
  msgTextNew.value = checkPwdStrong(newVal);
  if (msgTextNew.value > 1 || msgTextNew.value === 1) {
    pwdPercentageNew.value = 30;
    pwdColorNew.value = "#FF5340";
    pwdFormatFNew.value = '弱'
  }
  if (msgTextNew.value > 2 || msgTextNew.value === 2) {
    pwdPercentageNew.value = 60;
    pwdColorNew.value = "#FFB640"
    pwdFormatFNew.value = '中'
  }
  if (msgTextNew.value === 4) {
    pwdPercentageNew.value = 100;
    pwdColorNew.value = "#25DC1B"
    pwdFormatFNew.value = '强'
  }
}, {
  immediate: true
})

watch(() => formData.value.confirmPassword, (newVal) => {
  msgTextConfirm.value = checkPwdStrong(newVal);
  if (msgTextConfirm.value > 1 || msgTextConfirm.value === 1) {
    pwdPercentageConfirm.value = 30;
    pwdColorConfirm.value = "#FF5340";
    pwdFormatFConfirm.value = '弱'
  }
  if (msgTextConfirm.value > 2 || msgTextConfirm.value === 2) {
    pwdPercentageConfirm.value = 60;
    pwdColorConfirm.value = "#FFB640"
    pwdFormatFConfirm.value = '中'
  }
  if (msgTextConfirm.value === 4) {
    pwdPercentageConfirm.value = 100;
    pwdColorConfirm.value = "#25DC1B"
    pwdFormatFConfirm.value = '强'
  }
}, {
  immediate: true
})
</script>

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input type="password" v-model="formData.oldPassword" placeholder="请输入旧密码" show-password/>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input type="password" v-model="formData.newPassword" placeholder="请输入新密码" show-password/>
    </el-form-item>
    <div style="margin: 18px 0 18px 80px">
      <el-progress :percentage="pwdPercentageNew" :stroke-width="14" :text-inside="true" :color="pwdColorNew">
        {{ pwdFormatFNew }}
      </el-progress>
    </div>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input type="password" v-model="formData.confirmPassword" placeholder="请输入确认密码" show-password/>
    </el-form-item>
    <div style="margin: 18px 0 18px 80px">
      <el-progress :percentage="pwdPercentageConfirm" :stroke-width="14" :text-inside="true" :color="pwdColorConfirm">
        {{ pwdFormatFConfirm }}
      </el-progress>
    </div>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
